import { FunctionalComponent } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'
import { ElEmpty } from 'element-plus'
import { hasPermission } from '/@/utils/permission'

interface TableProps extends Partial<InstanceType<typeof ElTable>> {
  columns: Columns<any, any>
  selection?: boolean
  index?: boolean
}

export const QsTable: FunctionalComponent<TableProps> = (props, { emit }) => {
  return (
    <ElTable stripe {...props}>
      {{
        default: () => {
          return (
            <>
              {props.selection && <ElTableColumn type='selection' />}
              {props.index && <ElTableColumn label='序号' width={80} type='index' />}
              {props.columns
                .filter(
                  (column) =>
                    !column.permissions ||
                    hasPermission({
                      permission: column.permissions,
                      mode: 'oneOf',
                    })
                )
                .map((column) => {
                  return (
                    <ElTableColumn
                      showOverflowTooltip
                      fixed={column.fixed}
                      type={column.type}
                      label={column.title}
                      prop={column.key}
                      width={column.width}
                    >
                      {(scope: { row: Record<string, any>; column: Record<string, any>; $index: any }) => {
                        return column.customRender && column.customRender(scope, emit)
                      }}
                    </ElTableColumn>
                  )
                })}
            </>
          )
        },
        empty: () => {
          return <ElEmpty description='暂无数据' />
        },
      }}
    </ElTable>
  )
}

export default QsTable
